<!-- 幸福里匹配组件 -->
<template>
  <div class="d-flex">
    <div class="flex-1 cell-item">{{ portVO.portType | getPortTypeName }}</div>
    <!-- 匹配小区 -->
    <div class="flex-1 cell-item" v-loading="portVO.loading">
      <div v-show="!portVO.portResblockName && !portVO.loading" class="text-red">
        未匹配
      </div>
      <div v-show="portVO.portResblockName && !portVO.loading">
        {{ portVO.portResblockName }}
      </div>
    </div>

    <!-- 匹配 户室号 -->
    <div class="flex-3 cell-item">
      <div class="d-flex">
        <template v-for="item in portVO.hallRoomNumber">
          <el-input
            v-model="portVO[item.key]"
            :key="item.key"
            style="margin: 0 5px"
            :class="{ 'reject-input': !portVO[item.key] }"
            :placeholder="item.title"
            :disabled="!resblockMached"
          ></el-input>
        </template>
      </div>
    </div>

    <!-- 总价 -->
    <div class="flex-1 cell-item">
      <el-input v-model="portVO.totalPrice" :disabled="!resblockMached"> </el-input>
    </div>
    <!-- 面积 -->
    <div class="flex-1 cell-item">
      <el-input v-model="portVO.publishSize" :disabled="!resblockMached"> </el-input>
    </div>
    <!-- 均价 -->
    <div class="flex-1 cell-item">{{ averagePrice }}</div>
    <!-- 操作 -->
    <div class="flex-1 cell-item">
      <el-button size="mini" type="text" @click="handlePopShow">{{
        portVO.portResblockName ? '更换小区' : '手工匹配小区'
      }}</el-button>
    </div>
    <!-- 手动匹配弹层 -->
    <el-dialog
      :visible.sync="popVisible"
      top="30vh"
      :close-on-click-modal="false"
      :show-close="true"
      width="600px"
      append-to-body
    >
      <span slot="title" class="d-flex ai-baseline">
        <span class="fs-xl" style="margin-left: 8px">手工匹配</span>
        <span>（注：输入小区或关键字后，需点击“搜索”按钮）</span>
      </span>
      <ComManualMatch :popModel="popModel" :delId="delId"></ComManualMatch>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="popVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePopConfirm">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { hallRoomNumber } from '@/config/house/houseDetailConfig';
import { matchingResblock } from '@/api/user';
import ComManualMatch from '@/views/house/com/com-manual-match.vue';
import { PORT_CODE_XFL_MP } from '@/config/house/platform';

export default {
  name: 'XflMatchItem',
  components: {
    ComManualMatch,
  },
  props: {
    model: {
      type: Object,
      default() {
        return {};
      }
    },
    resblockName: {
      type: String,
      default: '',
    },
    noPortAccount: {
      type: Number,
      default: 0,
    },
    delId: String,
    autoMatch: Boolean,
  },
  data() {
    return {
      popModel: this.$store.getters['houseInfo/getManualAreaModel'](PORT_CODE_XFL_MP),

      popVisible: false,
      // 端口信息
      portVO: {
        portResblockName: '', //端口小区名称
        portBuild: '', //栋/幢
        portUnit: '', //单元/号
        portDoorNum: '', //门牌

        platformResblockId: '', //平台小区id   (platform 代表安居客等平台)
        platformBuildId: '', //平台楼栋id
        platformUnitId: '', //平台单元ID
        platformDoorNumId: '', //平台门牌号ID

        portType: '', // 平台类型
        loading: false, //匹配小区加载。。。
        searchKey: '', //搜索关键词
        hallRoomNumber,

        housingEstateOptions: [], //匹配小区选项

        totalPrice: '',
        buildingSize: '',
        publishSize: '',
      },
    };
  },
  created() {},
  mounted() {
    const { model } = this;

    this.renderPort(model, this.resblockName);
  },
  watch: {
    portVO: {
      handler(newVal) {
        this.$emit('updateportvo', newVal);
      },
      deep: true,
    },
  },
  computed: {
    resblockMached({ portVO }) {
      return portVO.portResblockName && portVO.platformResblockId;
    },
    averagePrice({ portVO }) {
      if (!portVO.totalPrice || !portVO.publishSize) return '';
      const p = (portVO.totalPrice / portVO.publishSize).toFixed(2);
      return p;
    },
  },
  methods: {
    renderPort(data, resblockName) {
      Object.assign(this.portVO, data);

      // 不可推
      if (data.onePushFlag != 0) {
        this.resetHuShiHao('portVO');

        // 自动帮他匹配小区
        if (!data.portResblockName) {
          if (this.noPortAccount == 1 && this.autoMatch) {
            this.autoMatchingResblock('portVO', resblockName);
          }
        }
      }
    },

    // 自动匹配小区
    autoMatchingResblock(way, name) {
      const m = this[way];
      m.loading = true;
      matchingResblock({
        delId: this.delId,
        portResblockName: (name || '').trim(),
        portType: m.portType,
        actionType: way == 'portVO' ? 0 : 1,
        type: 0,
      })
        .then((content) => {
          m.loading = false;

          if (content.length) {
            m.housingEstateOptions = content;
            if (way == 'portVO') {
              this.handleChangePortResblockName(way, content[0].portResblockName);
            }
          }
        })
        .catch(() => {
          m.loading = false;
        });
    },

    // 匹配到小区
    handleChangePortResblockName(way, value) {
      const m = this[way];
      const item = m.housingEstateOptions.find((v) => v.portResblockName == value);
      Object.assign(m, item);
    },

    handlePopShow() {
      this.popVisible = true;

      this.popModel.searchKey = '';
      this.popModel.portResblockName = '';
      this.popModel.platformResblockId = '';
      this.popModel.housingEstateOptions = [];
    },

    handlePopConfirm() {
      const {platformResblockId, portResblockName, housingEstateOptions } = this.popModel
      const { portVO } = this
      if (platformResblockId) {
        portVO.platformResblockId = platformResblockId;
        portVO.portResblockName = portResblockName;

        this.popVisible = false;
      } else {
        if (housingEstateOptions.length) {
          return this.$message.error('请选择弹窗中的选项匹配小区');
        }

        return this.$message.error('请输入小区或关键字后，点击搜索');
      }
    },

    resetHuShiHao(way) {
      this.clearHsh(way);
    },

    clearHsh(way) {
      const m = this[way];
      m.portBuild = '';
      m.portUnit = '';
      m.portDoorNum = '';

      m.platformBuildId = '';
      m.platformUnitId = '';
      m.platformDoorNumId = '';
    },
  },
};
</script>
<style></style>
